import React from 'react';
import css from './index.less';
import PropTypes from 'prop-types';

export default class Input extends React.Component {
  constructor(props) {
    super(props);
  }

  static propTypes = {
    label: PropTypes.any,
    value: PropTypes.any,
    unit: PropTypes.any,
    type: PropTypes.string,
    placeholder: PropTypes.any,
    onChange: PropTypes.func,
    disabled: PropTypes.bool,
    min: PropTypes.number,
    max: PropTypes.number,
  };

  static defaultProps = {
    label: '二级标题',
    value: '',
    unit: 'px',
    type: 'text',
    placeholder: '',
    onChange: () => {},
    disabled: false,
  };

  render() {
    const { label, onChange, placeholder, value, unit, disabled, type, min, max } = this.props;
    const inputProps = {
      placeholder, value, disabled, type, min, max,
      onChange: (e) => {
        onChange(parseFloat(e.target.value) || 0);
      }
    };
    return (
      <div className={css.wrap}>
        <div className={css.label}>
          &bull; {label}
        </div>
        <div className={css.value}>
          <input {...inputProps} />
        </div>
        <div className={css.unit}>
          {unit}
        </div>
      </div>
    );
  }
}
